<template>
  <!-- loading加载组件 -->
  <div class="loading">
    <a-spin :tip="tip" :size="size" :delay="delay" v-if="props" />
  </div>
</template>

<script setup lang="ts">
interface PropsTypes {
  tip?: string;
  size?: string;
  delay?: string;
}
const props = withDefaults(defineProps<PropsTypes>(), {
  tip: "加载中···",
  size: "large",
  delay: "500"
});
</script>

<style lang="less">
// loading加载
.loading {
  width: 200px;
  height: 130px;
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 30px 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
</style>
